<!-- 点击课程后，显示课程详情页面 -->
<template>
    <div class="main">
        <!-- 顶部课程信息 -->
        <div class="top-course">
            <div class="top-course-div">
                <h1 class="course-name">{{ courseName }}</h1>
                <div class="top-course-div-div">
                    <el-icon class="icon-1">
                        <User />
                    </el-icon>
                    <span>{{ teacher }}</span>
                    <el-icon class="icon-2">
                        <Timer />
                    </el-icon>
                    <span>{{ courseTime }}</span>
                </div>
            </div>
        </div>
        <!-- 导航菜单 -->
        <div class="navigate-menu">
            <div class="navigate-menu-div">
                <nav class="navigate-menu-div-nav">
                    <button v-for="item in navItems" :key="item.key" @click="currentNav = item.key" :class="['navigate-menu-div-nav-button',
                        currentNav === item.key
                            ? 'button-1'
                            : 'button-2']">
                        {{ item.label }}
                    </button>
                </nav>
            </div>
        </div>
        <!-- 主要内容区域 -->
        <div class="content-area">
            <div v-if="currentNav === 'journal'" class="content-area-div">
                <h2 class="content-area-div-h2">学习日志</h2>
                <div class="space-y-4">
                    <div v-for="(log, index) in learningLogs" :key="index" class="border-b pb-4">
                        <div class="flex justify-between items-center mb-2">
                            <span class="text-sm text-gray-600">{{ log.date }}</span>
                            <span class="text-sm text-gray-600">学习时长: {{ log.duration }}</span>
                        </div>
                        <p class="text-gray-700">{{ log.content }}</p>
                    </div>
                </div>
            </div>

            <div v-if="currentNav === 'content'" class="content-area-div">
                <h2 class="content-area-div-h2">课程内容</h2>
                <div class="space-y-4">
                    <div v-for="(unit, index) in courseContent" :key="index" class="border-b last:border-b-0 pb-4">
                        <h3 class="text-base font-medium text-gray-800 mb-2">{{ unit.title }}</h3>
                        <div class="text-sm text-gray-600">{{ unit.description }}</div>
                    </div>
                </div>
            </div>

            <div v-if="currentNav === 'discussion'" class="content-area-div">
                <h2 class="content-area-div-h2">讨论区</h2>
                <div class="space-y-6">
                    <div v-for="(post, index) in discussionPosts" :key="index" class="border-b last:border-b-0 pb-6">
                        <div class="flex items-start space-x-4">
                            <div class="flex-1">
                                <h3 class="text-base font-medium text-gray-800">{{ post.title }}</h3>
                                <p class="mt-2 text-sm text-gray-600">{{ post.content }}</p>
                                <div class="mt-2 flex items-center text-sm text-gray-500">
                                    <span>{{ post.author }}</span>
                                    <span class="mx-2">·</span>
                                    <span>{{ post.date }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div v-if="currentNav === 'announcement'" class="content-area-div">
                <h2 class="content-area-div-h2">课程公告</h2>
                <div class="space-y-4">
                    <div v-for="(notice, index) in announcements" :key="index" class="border-b last:border-b-0 pb-4">
                        <h3 class="text-base font-medium text-gray-800">{{ notice.title }}</h3>
                        <p class="mt-2 text-sm text-gray-600">{{ notice.content }}</p>
                        <div class="mt-2 text-sm text-gray-500">{{ notice.date }}</div>
                    </div>
                </div>
            </div>

            <div v-if="currentNav === 'group'" class="content-area-div">
                <h2 class="content-area-div-h2">学习小组</h2>
                <div class="grid grid-cols-2 gap-6">
                    <div v-for="(group, index) in groups" :key="index" class="border rounded-lg p-4">
                        <h3 class="text-base font-medium text-gray-800">{{ group.name }}</h3>
                        <div class="mt-2 text-sm text-gray-600">成员数: {{ group.memberCount }}</div>
                        <div class="mt-2 text-sm text-gray-600">组长: {{ group.leader }}</div>
                    </div>
                </div>
            </div>

            <div v-if="currentNav === 'grade'" class="content-area-div">
                <!-- 左侧评估方案 -->
                <div class="col-span-1">
                    <div class="bg-white rounded-lg shadow p-6">
                        <h2 class="content-area-div-h2">课程考核方案</h2>
                        <div class="space-y-3">
                            <div v-for="(item, index) in assessmentItems" :key="index"
                                class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                <span class="text-sm text-gray-700">{{ item.name }}</span>
                                <span class="text-sm font-medium text-gray-900">{{ item.percentage }}%</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 右侧成绩分析 -->
                <div class="col-span-2">
                    <div class="bg-white rounded-lg shadow p-6">
                        <div class="grid grid-cols-2 gap-8">
                            <!-- 环形进度图 -->
                            <div class="flex flex-col items-center">
                                <div ref="chartRef" class="w-48 h-48"></div>
                                <div class="mt-4 grid grid-cols-3 gap-4 text-center">
                                    <div>
                                        <div class="text-lg font-medium text-gray-900">12.2</div>
                                        <div class="text-sm text-gray-600">班级平均分</div>
                                    </div>
                                    <div>
                                        <div class="text-lg font-medium text-blue-600">18.3</div>
                                        <div class="text-sm text-gray-600">班级最高分</div>
                                    </div>
                                    <div>
                                        <div class="text-lg font-medium text-gray-900">6.9</div>
                                        <div class="text-sm text-gray-600">班级最低分</div>
                                    </div>
                                </div>
                            </div>
                            <!-- 得分趋势图 -->
                            <div ref="lineChartRef" class="h-64"></div>
                        </div>
                    </div>
                </div>
                <!-- 底部详细信息 -->
                <div class="mt-8 bg-white rounded-lg shadow">
                    <div class="grid grid-cols-5 text-sm font-medium text-gray-600 border-b">
                        <div class="p-4">考核模块</div>
                        <div class="p-4">学习单元内容</div>
                        <div class="p-4">学习时间</div>
                        <div class="p-4">完成情况</div>
                        <div class="p-4">得分</div>
                    </div>
                    <div v-for="(item, index) in detailItems" :key="index"
                        class="grid grid-cols-5 text-sm text-gray-700 border-b last:border-b-0">
                        <div class="p-4">{{ item.module }}</div>
                        <div class="p-4">{{ item.content }}</div>
                        <div class="p-4">{{ item.time }}</div>
                        <div class="p-4">{{ item.status }}</div>
                        <div class="p-4">{{ item.score }}</div>
                    </div>
                </div>
            </div>
            <!-- 学情分析 -->
            <div v-if="currentNav === 'analysis'" class="analysis-area">
                <LearningSituation v-if="!selectedHomework" @select-homework="handleHomeworkSelect" />
                <UploadFile v-else :homework-title="selectedHomework" />
            </div>

        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { User, Timer } from '@element-plus/icons-vue';
import LearningSituation from '@/components/classManage/Course/LearningSituation.vue'
import UploadFile from '@/components/classManage/Course/UploadFile.vue'
import * as echarts from 'echarts';
import { useRoute } from 'vue-router';

const route = useRoute();
const query = route.query;

const selectedHomework = ref('');

const handleHomeworkSelect = (title: string) => {
    selectedHomework.value = title;
};

const courseName = ref(query.courseName?.toString() || '软件工程经济学');
const teacher = ref(query.teacherName && query.className ?
    `${query.teacherName} ${query.className}` : '');
const courseTime = ref(query.courseTime ?
    `开课时间: ${query.courseTime}` : '');
const currentNav = ref('analysis');
const navItems = [
    { key: 'journal', label: '学习日志' },
    { key: 'content', label: '学习内容' },
    { key: 'discussion', label: '讨论区' },
    { key: 'announcement', label: '公告' },
    { key: 'group', label: '分组' },
    { key: 'grade', label: '成绩单' },
    { key: 'analysis', label: '学情分析' }
];

const learningLogs = [
    {
        date: '2024-01-15',
        duration: '2小时30分钟',
        content: '完成了软件工程经济学第一章的学习，掌握了基本概念和原理。'
    },
    {
        date: '2024-01-14',
        duration: '1小时45分钟',
        content: '参与了关于软件项目投资分析方法的在线讨论，收获颇丰。'
    },
    {
        date: '2024-01-13',
        duration: '2小时',
        content: '复习了成本效益分析相关内容，完成了课后练习。'
    }
];

const courseContent = [
    {
        title: '第一章：软件工程经济学基础',
        description: '本章介绍软件工程经济学的基本概念、原理和应用范围。'
    },
    {
        title: '第二章：软件项目成本估算',
        description: '学习各种软件项目成本估算方法和技术。'
    },
    {
        title: '第三章：软件项目投资分析',
        description: '深入探讨软件项目投资决策的各种方法和工具。'
    }
];

const discussionPosts = [
    {
        title: '如何评估软件项目的经济可行性？',
        content: '在实际项目中，经济可行性分析往往面临很多挑战，希望同学们分享一下经验。',
        author: '张教授',
        date: '2024-01-15'
    },
    {
        title: '软件成本估算的难点',
        content: '软件项目的成本估算经常不够准确，这个问题该如何解决？',
        author: '王同学',
        date: '2024-01-14'
    }
];

const announcements = [
    {
        title: '关于期末项目报告的要求',
        content: '请各位同学注意，期末项目报告需要包含完整的经济可行性分析部分。',
        date: '2024-01-15'
    },
    {
        title: '课程作业提交通知',
        content: '第三章的课后作业请于本周五前提交到学习平台。',
        date: '2024-01-13'
    }
];

const groups = [
    {
        name: '创新项目组',
        memberCount: 5,
        leader: '李明'
    },
    {
        name: '研究小组A',
        memberCount: 4,
        leader: '陈华'
    },
    {
        name: '实践团队B',
        memberCount: 6,
        leader: '周婷'
    }
];

const gradeItems = [
    {
        name: '期中考试',
        score: 85,
        total: 100,
        comment: '整体表现良好，理论基础扎实'
    },
    {
        name: '课程作业',
        score: 90,
        total: 100,
        comment: '作业完成度高，分析深入'
    },
    {
        name: '小组项目',
        score: 88,
        total: 100,
        comment: '团队协作能力强，报告质量好'
    }
];
const assessmentItems = [
    { name: '阅读（0个学习单元）', percentage: 10 },
    { name: '讨论（0个学习单元）', percentage: 20 },
    { name: '评论（0个学习单元）', percentage: 5 },
    { name: '作业（0个学习单元）', percentage: 10 },
    { name: '前测课调查（0个学习单元）', percentage: 5 },
    { name: '课堂（14个学习单元）', percentage: 20 },
    { name: '考试（6个学习单元）', percentage: 30 }
];
const detailItems = [
    {
        module: '阅读',
        content: '第一章 软件工程经济学基础',
        time: '2024-01-15',
        status: '已完成',
        score: '9.5'
    },
    {
        module: '讨论',
        content: '软件项目投资分析方法',
        time: '2024-01-20',
        status: '已完成',
        score: '8.8'
    },
    {
        module: '作业',
        content: '成本效益分析实践',
        time: '2024-01-25',
        status: '进行中',
        score: '-'
    }
];
const chartRef = ref<HTMLElement | null>(null);
const lineChartRef = ref<HTMLElement | null>(null);
onMounted(() => {
    if (chartRef.value) {
        const chart = echarts.init(chartRef.value);
        chart.setOption({
            animation: false,
            series: [{
                type: 'gauge',
                startAngle: 90,
                endAngle: -270,
                pointer: {
                    show: false
                },
                progress: {
                    show: true,
                    overlap: false,
                    roundCap: true,
                    clip: false,
                    itemStyle: {
                        color: '#4318FF'
                    }
                },
                axisLine: {
                    lineStyle: {
                        width: 18
                    }
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                data: [{
                    value: 13.3,
                    name: '个人得分',
                    title: {
                        offsetCenter: ['0%', '0%']
                    },
                    detail: {
                        offsetCenter: ['0%', '0%']
                    }
                }],
                title: {
                    fontSize: 14
                },
                detail: {
                    width: 50,
                    height: 14,
                    fontSize: 28,
                    color: '#4318FF',
                    formatter: '{value}'
                }
            }]
        });
    }
    if (lineChartRef.value) {
        const lineChart = echarts.init(lineChartRef.value);
        lineChart.setOption({
            animation: false,
            grid: {
                top: 40,
                right: 20,
                bottom: 40,
                left: 40
            },
            xAxis: {
                type: 'category',
                data: ['09-04', '09-25', '10-16', '10-30', '11-13', '11-27', '12-11'],
                axisLine: {
                    lineStyle: {
                        color: '#E2E8F0'
                    }
                }
            },
            yAxis: {
                type: 'value',
                min: 0,
                max: 100,
                interval: 20,
                axisLine: {
                    show: false
                },
                splitLine: {
                    lineStyle: {
                        color: '#E2E8F0'
                    }
                }
            },
            series: [{
                data: [0, 2, 5, 8, 10, 12, 13.3],
                type: 'line',
                smooth: true,
                symbolSize: 6,
                lineStyle: {
                    color: '#4318FF'
                },
                itemStyle: {
                    color: '#4318FF'
                }
            }]
        });
    }
});
</script>
<style scoped>
.container {
    max-width: 1440px;
}

.main {
    min-height: 100vh;
    background-color: #F9FAFB;
}

.top-course {
    background-color: #ffffff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.top-course-div {
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.course-name {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 500;
    color: #111827;
}

.top-course-div-div {
    display: flex;
    margin-top: 0.5rem;
    align-items: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #4B5563;
}

.icon-1 {
    margin-right: 0.5rem;
}

.icon-2 {
    margin-right: 0.5rem;
    margin-left: 1rem;
}

.navigate-menu {
    border-bottom-width: 1px;
    background-color: #ffffff;
}

.navigate-menu-div {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin-top: 1rem;
}

.navigate-menu-div-nav {
    display: flex;
    margin-left: -0.5rem;
}

.navigate-menu-div-nav-button {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    white-space: nowrap;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    margin-right: 1rem;
    border: none;
    background: transparent;
    cursor: pointer;
    position: relative;
}

.button-1 {
    color: #4318FF;
}

.button-1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #4318FF;
}

.button-2 {
    color: #718096;
}

.button-2:hover {
    color: #2D3748;
}

.content-area {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.content-area-div {
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #ffffff;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.content-area-div-h2 {
    margin-bottom: 1rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 500;
    color: #111827;
}

</style>